<template>
  <div class="details-swipe-frame">
    <div class="vant-swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <template v-for="(item, idx) in swipeData" :key="idx">
          <van-swipe-item class="my-swipe-item">
            <img :src="item.albumUrl" alt="">
          </van-swipe-item>
        </template>
        <template #indicator="{ active, total }">
          <div class="custom-indicator">
            <template v-for="(value, key, idx) in categoryData" :key="idx">
              <span class="item" :class="{ active: swipeData[active]?.enumPictureCategory == key }">
                <span class="text">{{ getTextReg(value[0].title) }}</span>
                <span class="count" v-if="swipeData[active]?.enumPictureCategory == key">{{
                  getCategoryIdx(swipeData[active]) + 1 }} / {{ categoryData[key].length }}</span>
              </span>
            </template>
          </div>

        </template>
      </van-swipe>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  swipeData: {
    type: Array,
    default: () => ([])
  }
})

const categoryData = {}
for (const item of props.swipeData) {
  let keyArr = categoryData[item.enumPictureCategory]
  if (!keyArr) {
    keyArr = []
    categoryData[item.enumPictureCategory] = keyArr
  }
  keyArr.push(item)
}

// console.log(props.swipeData)
// console.log(categoryData)


// 处理轮播图指示器显示的文字
const textReg = /【(.*?)】/i
function getTextReg(text) {
  const result = textReg.exec(text)
  return result[1]

}

// 轮播图指示器第几张
function getCategoryIdx(item) {
  // console.log(item.enumPictureCategory)
  const valueArray = categoryData[item.enumPictureCategory]
  return valueArray.findIndex((data) => {
    return data === item
  })
}



</script>

<style lang="less" scoped>
.details-swipe-frame {

  .vant-swipe {

    .my-swipe {


      .my-swipe-item {

        img {
          width: 100%;
        }
      }

      .custom-indicator {
        position: absolute;
        right: 5px;
        bottom: 5px;
        padding: 2px 5px;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;

        .item {

          .text {
            margin: 0 5px;
          }

          &.active {
            padding: 0 3px;
            border-radius: 5px;
            background-color: #fff;
            color: #333;
          }
        }




      }
    }
  }
}
</style>